<template>
  <div class="child">
    <!-- 组件的v-model -->
    <LeeForm v-bind="searchFormConfig" v-model="formData">
      <template #header>
        <h1>搜索</h1>
      </template>
      <template #footer>
        <div class="btns">
          <el-button type="primary" @click="handleQueryClick">
            <el-icon class="icon-search" :size="16"><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleResetClick">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </div>
      </template>
    </LeeForm>
  </div>
</template>

<script setup lang="ts">
import LeeForm from '@/base-ui/form/Form.vue'

const props = defineProps({
  searchFormConfig: {
    type: Object,
    required: true
  }
})

const emits = defineEmits(['resetBtnClick', 'queryBtnClick'])
// 双向绑定的属性应该由配置文件的 field 来决定
// 就是根据配置文件里面的属性来 给每个页面生成对应的 v-model绑定的属性
// 1、优化一： formData 中的属性应该动态来决定，不是这样写死
/* const formData = ref({
  id: '',
  name: '',
  realname: '',
  enable: '',
  createAt: ''
}) */
const formItems = props.searchFormConfig.formItems
const formOriginData: any = {} // 初始数据 为空
for (const item of formItems) {
  // 通过key动态生成 添加进formOriginData
  formOriginData[item.field] = ''
}
// 双向绑定的
const formData = ref(formOriginData)

// 2、优化二：当用户点击重置按钮
const handleResetClick = () => {
  // 1、直接修改整个对象的方式不可以 在没改写双向绑定之前
  formData.value = formOriginData
  emits('resetBtnClick')
  // 2、单独修改里面的某个 key对应的属性， 可以
  // for (const key in formOriginData) {
  //   formData.value[`${key}`] = formOriginData[key]
  // }
}
// 3、优化三：用户点击查询 需要发送网络请求
const handleQueryClick = () => {
  emits('queryBtnClick', formData.value)
}
</script>
<style scoped lang="less">
.btns {
  text-align: right;
}
</style>
